<template>
  <div>
    <!--@click.stop防止冒泡事件发生
    也就是停止事件传递
    事件发生的顺序由内向外
    -->
    <div class="inner" @click="div1Handler">
    <input type="button" value="点击" @click.stop="btnHandler">
  </div>
    <!--prevent阻止默认行为-->
    <a href="http://www.baidu.com" @click.prevent="linkClick">有问题去百度</a>
    <!--.capture 捕获事件的发生机制
          顺序由外向内
    -->
    <div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div>
    <!--.self 只有点击click上的元素才会被触发  也会终止传递-->
    <div class="inner" @click.self="div1Handler" style="margin-top: 20px">
      <input type="button" value="戳他3" @click="btnHandler">
    </div>
    <!--prevent阻止默认行为 只会触发一次，第一次提示，第二次点击跳转-->
    <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题去百度</a>
    <!-- 演示： .stop 和 .self 的区别
     stop是终止事件传递
     self是本身事件不触发，即是跳过自己
     -->
     <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '事件修饰符',
  data () {
    return {
      msg: '是爱看'
    }
  },
  methods: {
    div1Handler () {
      alert('触发inner  div')
    },
    btnHandler () {
      alert('触发button ')
    },
    linkClick () {
      alert('触发链接')
    },
    div2Handler () {
      alert('触发 div2Handler')
    }
  }
}
</script>

<style scoped>
  .inner {
    width: 200px;
    height: 200px;
    background-color: gold;
  }
  .outer {
    padding: 30px;
    background-color: aquamarine;
  }
</style>
